import View from 'ol/View'
import './style.css'
import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector'
import GeoJSON from 'ol/format/GeoJSON.js'
import Style from 'ol/style/Style'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'

const target = 'map'

const center = [114.3165, 30.5953]
const view = new View({
    center,
    zoom: 4,
    projection: 'EPSG:4326'
})

// 加载高德地图瓦片
const layers = [new TileLayer({
    source: new XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
    })
})]

const map = new Map({
    target,
    view,
    layers
})

// 加载矢量图层 将一些矢量数据（很多格式）加载到底图上

// 各省数据
const vectorSource = new VectorSource({
    // 加载中国数据
    // url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000.json',
    // 加载各省数据
    url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
    format: new GeoJSON(), // 格式数据为 GeoJSON 格式
})

const vectoryLayer = new VectorLayer({
    // VectorSource: 加载矢量数据源
    source: vectorSource,
    // 对矢量图层添加样式
    style: new Style({
        fill: new Fill({
            color: 'red'
        }),
        stroke: new Stroke({
            color: 'blue'
        })
    })
})

// 对数据进行监听
vectorSource.on('change', function() {
    console.log(this.getFeatures())
})

// GeoJSON 的数据格式
// {
//     "type": "FeatureCollection",
//     "features": [
//         {
//             "type": "Feature",
//             "properties": {}, 自定义的属性
//             "geometry": { 
//                 "type": "", 形状
//                 "coordinates": [] 经纬度信息
//              },
//         }
//     ]
// }
map.addLayer(vectoryLayer)

// 鼠标移动某一个省份 对应省份高亮
map.on('pointermove', function(e) {
    // 获取鼠标对应的经纬度坐标
    const coordinate = e.coordinate
    // 获取鼠标对应的省份要素
    const [feature = null] = vectorSource.getFeaturesAtCoordinate(coordinate)
    // 重置之前所有省份的样式
    const features = vectorSource.getFeatures()
    features.forEach(feature => {
        feature.setStyle(new Style({
                fill: new Fill({
                    color: 'red'
                }),
                stroke: new Stroke({
                    color: 'blue'
                })
            })
        )
    })
    // 判断当前省份要素是否存在
    if(feature) {
        // 对省份要素添加样式
        feature.setStyle(new Style({
            fill: new Fill({
                color: 'green'
            })
        }))
    }
})